<template>
  <a-card hoverable :bordered="false" :style="{ width: '100%', marginBottom: '10px' }">
    <div class="chart">
      <div class="chart_title">
        <div class="chart_title_left">近七日收支金额</div>
      </div>
    </div>
    <div style="width: 100%; margin-top: 10px">
      <div id="jqrszjecharts" style="width: 100%; height: 353px"></div>
    </div>
  </a-card>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import syApi from "@/api/home/sy";
const chartsOptions = ref(null);
onMounted(() => {
    getJqrszjeCount();
});
const getJqrszjeCount = () => {
    syApi.getJqrszjeCount().then((res) => {
        console.log(res)
        if (res.code == 200 && res.success) {
            initCharts(res.data)
        }else{
            console.log(e)
        }
    }).catch((e) => {
        console.log(e)
    })
  }
const initCharts = (e) => {
  var chartsBox = document.getElementById("jqrszjecharts");
  var myChart = echarts.init(chartsBox);
  let option = {
    grid: {
        left: '10%',   //距离左边的距离
        right: '5%', //距离右边的距离
        bottom: '8%',//距离下边的距离
        top: '15%' //距离上边的距离
        },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    legend: {
      data: ["收费", "支出"],
    },
    xAxis: [
      {
        type: "category",
        data: e.date,
        axisPointer: {
          type: "shadow",
        },
        axisTick:{
            show:false // 不显示坐标轴刻度线
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "元",
        axisLabel: {
          formatter: "{value}",
        },
        axisLine:{
            show: true, 
            lineStyle:{
                color: '#CCCCCC',
                type:"dashed"
            }
        },
        splitLine:{
            show:false // 不显示网格线
        },
      }
    ],
    series: [
      {
        name: "收费",
        type: "line",
        smooth:true,
        tooltip: {
          valueFormatter: function (value) {
            return value + "元";
          },
        },
        data: e.shoukuan,
        itemStyle: {
          normal: {
            color: "#0A30B7",
          },
        },
        areaStyle: {
              // 添加渐变阴影
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  // 设置渐变色
                  offset: 0,
                  color: "#0A30B740", // 开始颜色
                },
                {
                  offset: 1,
                  color: "#0A30B740", // 结束颜色
                },
              ]),
            }
      },
      {
        name: "支出",
        type: "line",
        smooth:true,
        tooltip: {
          valueFormatter: function (value) {
            return value + "元";
          },
        },
        data: e.fukuan,
        itemStyle: {
          normal: {
            color: "#0E9CFF",
          },
        },
        areaStyle: {
              // 添加渐变阴影
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  // 设置渐变色
                  offset: 0,
                  color: "#0E9CFF40", // 开始颜色
                },
                {
                  offset: 1,
                  color: "#0E9CFF40", // 结束颜色
                },
              ]),
            }
      },
    ],
  };
  myChart.setOption(option);
};
</script>
<style scoped>
.chart_title {
  display: flex;
  align-items: center;
  height:40px;
}
.chart_title_left {
  font-family: PingFang SC;
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0px;
  color: #000000;
  padding: 2px 10px;
  border-left: 5px solid #68C1B2;
}
</style>
